<template>
    <div class="home">
        <div class="homeBg">
            <img src="@/assets/homebg.png" alt="">
        </div>
        <div class="homeTop">
            <img src="@/assets/SmartsVay.png" alt="">
        </div>
        <div class="homeContentWapper">
            <div class="moneyCard">
                <div class="moneyBg"> <img src="@/assets/homeMoneyBg.png" alt=""></div>
                <div class="cardContent">
                    <div class="moneyTitle">Dự đoán số tiền được vay</div>
                    <div class="money">{{ homeLoanMoney.toLocaleString() }}</div>
                    <div class="qixian" v-if="showDay">
                        Kỳ hạn &nbsp; <span>{{ day }}</span>
                    </div>
                </div>
            </div>
            <div class="loanBtn" @click="loanBtnClick">
                Nộp đơn
            </div>
            <div class="tip">
                <img src="@/assets/ling.png" alt="">
                <div class="scrollArea">
                    <p>Ngày nay, cho đến nay, đã có hơn 500000 người đăng ký được khoản vay thành công</p>
                    <p>Ngày nay, cho đến nay, đã có hơn 500000 người đăng ký được khoản vay thành công</p>
                </div>
            </div>
            <PlatformAdvantage />

        </div>
    </div>
</template>

<script setup lang='ts'>
import PlatformAdvantage from '@/components/PlatformAdvantage.vue';
import { useOverAllStore } from '@/stores/overAll';
import { onMounted, ref } from 'vue';
import { getItem, setItem } from '@/utils/token-utils'
import { useRouter } from 'vue-router';
import api from '@/api';
import { Toast } from 'tdesign-mobile-vue';
let homeLoanMoney = ref(0)
let day = ref('')

const router = useRouter()


let showDay = ref(true)



let overAllStore = useOverAllStore()


const callRiskControlRules = async () => {
    try {
        let riskRes = (await api.callRiskControlRules({
            uuid: getItem('uuid'),
            token:getItem('token')
        })).data
        if (riskRes.code == 0) {

        } else {
            Toast({
                message: riskRes.message,
                duration: 3 * 1000
            })
        }

    } catch (error) {
        console.log(error);

    }
}


const loanBtnClick = ()=>{

    if (overAllStore.homeScreensData.scienFlag=='1'||overAllStore.homeScreensData.scienFlag=='4') {
        // callRiskControlRules()
        router.push({
            path:'/xunnang'
        })
    } else if(overAllStore.homeScreensData.scienFlag=='13') {
        router.push({
            path:'/confirmLoan',
            query:{
                applyId:overAllStore.homeScreensData.unconfirmResult.applyItemOfHome.applyIdOfHome
            }
        })
    }
}

const getScreenHandler = async () => {
    try {
        let res = await overAllStore.getHomeScreenStoreHandler({
            uuid: getItem('uuid'),
            token: getItem('token'),
        })
        if (!res.data) return
        toScreenPage(res.data.scienFlag, res.data)
        
        if (res.data.scienFlag == '1' || res.data.scienFlag == '4') {
            try {
                homeLoanMoney.value = Number(res.data.showAmt)
                let dictionaryRes = (await api.getDictionary({
                    stopwatch: 'sys_deploy_period'
                })).data
                
                if (dictionaryRes.code=='0') {
                    day.value = dictionaryRes.data.stopwatchVal
                } else {
                    Toast({
                        message:dictionaryRes.message,
                        duration:3*1000
                    })
                }
                
            } catch (error) {
                console.log(error);
                
            }
        }

        // if (res.data.scienFlag == '4') {
        //     homeLoanMoney.value = Number(res.data.showAmt)
        // }
        // if (res.data.scienFlag == '1') {
        //     homeLoanMoney.value = Number(res.data.showAmt)
        // }
        if (res.data.scienFlag == '13') {
            homeLoanMoney.value = Number(res.data.unconfirmResult.unconfirmAmt)
            showDay.value=false
        }

    } catch (error) {
        console.log('Error', error);


    }
}


const toScreenPage = (scienFlag: string, data: any) => {
    switch (scienFlag) {
        case '14':
            router.replace({
                path: '/repayMent',
                query: {
                    OrderIdOfHome: data.repayModule.OrderIdOfHome
                }
            })
            break;

        case '15':
            router.replace({
                path: '/loanIng',
                query: {
                    amountResOfConfirm: data.amountResOfConfirm
                }
            })
            break;
        case '6':
            router.replace({
                path: '/refuseLoan'
            })
        // case '1' || '4' || '13':
        //     router.replace({
        //         path: '/home'
        //     })
        //     break;
        default:
            break;
    }
}


onMounted(() => {

    getScreenHandler()
})


</script>

<style lang="less" scoped>
.home {
    height: 100%;
    background: linear-gradient(180deg, #FFFFFF 15%, #F5F5F7 65%, #F5F5F7 100%);
    position: relative;
    z-index: 0;

    .homeBg {
        width: 100%;
        height: 11.1rem;
        position: absolute;
        z-index: -1;

        &>img {
            width: 100%;
            height: 100%;
        }
    }

    .homeTop {
        width: 100%;
        min-height: 2.3rem;
        display: flex;
        justify-content: center;
        align-items: center;

        &>img {
            display: block;
            width: 7rem;
        }
    }

    .homeContentWapper {
        padding: 0 .8rem;
        padding-bottom: 1rem;
        height: calc(100% - 2.3rem - 2.75rem);
        overflow: scroll;

        .moneyCard {
            position: relative;

            .moneyBg {
                display: block;
                width: 100%;
                height: 9.9rem;

                &>img {
                    width: 100%;
                    height: 100%;
                }
            }

            .cardContent {
                padding: 0 16px;
                position: absolute;
                top: 1.2rem;

                .moneyTitle {
                    /* font-family: SF Pro, SF Pro; */
                    font-weight: 400;
                    font-size: .8rem;
                    color: rgba(255, 255, 255, 0.7);
                    line-height: 1.1rem;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }

                .money {
                    /* font-family: DIN Alternate, DIN Alternate; */
                    font-weight: bold;
                    font-size: 2.1rem;
                    color: #FFFFFF;
                    line-height: 2.6rem;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                    margin: 4px 0;
                }

                .qixian {
                    /* font-family: SF Pro, SF Pro; */
                    font-weight: 400;
                    font-size: .7rem;
                    color: rgba(255, 255, 255, .6);
                    line-height: 1.1rem;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;

                    &>span {
                        font-family: SF Pro, SF Pro;
                        font-weight: 600;
                        font-size: 16px;
                        color: #FFFFFF;
                        line-height: 24px;
                    }
                }
            }
        }

        .loanBtn {
            width: 100%;
            height: 2.8rem;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(90deg, #F9A848 0%, #F7941D 100%);
            border-radius: 1.4rem;

            /* font-family: SF Pro, SF Pro; */
            font-weight: 600;
            font-size: 20px;
            color: #FFFFFF;
            line-height: 30px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .tip {
            width: 100%;
            /* background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255,0) 80%); */
            background: #fff;
            border-radius: .2rem;
            margin-top: .6rem;
            padding: .35rem .6rem;
            display: flex;
            justify-content: flex-start;
            overflow: hidden;
            box-sizing: border-box;

            &>img {
                display: block;
                width: 1.2rem;
                height: 1.2rem;
            }

            .scrollArea {
                width: 80%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                overflow: hidden;
                /* text-overflow: ellipsis; */

                &>p {
                    /* overflow: hidden; */
                    white-space: nowrap;
                    /* overflow: hidden;
                    text-overflow: ellipsis; */
                    /* 防止文本换行 */
                    position: relative;
                    /* 设置相对定位以便应用动画 */
                    animation: scrollText 10s linear infinite 1s;
                }

                &>p:nth-child(1) {
                    margin-right: 10%;
                }

            }
        }
    }


}

@keyframes scrollText {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-107%);
    }
}
</style>